<template>
	<view class="screenin">
		<view class="personshow">
			<image class="person_picture" :src="picture" v-if="picture!=null"></image>
			<image class="person_picture" src="../../static/register.png" v-if="picture==null"></image>
		</view>
		<view class="content">
			<view class="ele">
				<text>账号：</text>
				<text>{{person.user_id}}</text>
			</view>
			<view class="ele">
				<text>邮箱：</text>
				<text>{{person.email}}</text>
			</view>
			<view class="ele">
				<text>姓名：</text>
				<text>{{person.user_name}}</text>
			</view>
			<view class="ele">
				<text>性别：</text>
				<text v-if="person.gender==0">男</text>
				<text v-else>女</text>
			</view>
			<view class="ele">
				<text>介绍：</text>
				<text>{{person.introduce}}</text>
			</view>
		</view>
		<button @click="chat">聊天</button>
		<button @click="delete_f">删除好友</button>
		<button @click="add_f">添加好友</button>
	</view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import {onShow,onLoad} from '@dcloudio/uni-app'
import { useCounterStore } from '../../store/user';
import { Person } from '../../public/p_interface';
	
	const user = useCounterStore();

	let isLogin = ref(true)

	let picture = ref<string>("http://121.40.242.216:9000/bucket-chat/2fde0c1e020c92d14122e13125e876d.jpg")
	let person = ref<Person>(null)
	
	const chat =()=>{
		uni.navigateTo({
		    url: '/pages/chat/chat?id='+person.value.user_id
		});  
	}
	const delete_f =()=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/friend/remove_firend',
			method:'GET',
		    data: {
				id:person.value.user_id
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				console.log(res.data);
		    }
		});
	}
	const add_f =()=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/friend/add_friend',
			method:'GET',
		    data: {
				id:person.value.user_id
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				
		    }
		});
	}
	
	onShow(()=>{
		console.log("页面初始化")
		
	})
	onLoad((option)=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/friend/get',
			method:'GET',
		    data: {
				id:option.id
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				person.value=res.data!.data
				picture.value=res.data!.data.picture
		    }
		});
	})
	
</script>
	

<style>
.content{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.ele{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	height: 100rpx;
	width: 100%;
	margin-top: 30rpx;
	border-bottom-style: solid;
	border-bottom-color: #CDD0D6;
	border-bottom-width: 1rpx;
}
.line{
	width: 100%;
	height: 115rpx;
	display: flex;
	align-items:center;
	background: #F0F2F5;
	border-color: #CDD0D6;
	border-bottom-style:solid;
	border-radius: 20rpx;
}
.line-image{
	width: 30px;
	height: 30px;
	margin-right: 20rpx;
}
.screenin{
	width: 100%;
	height: 100%;
	background: white;
}
.personshow{
	display: flex;
	justify-content: center; /* 水平居中 */  
	align-items: center; 
	border-bottom-style: solid;
	margin-bottom: 80rpx;
	border-color: rgb(199.5, 201, 204);
	border-width: 5rpx;  
	height: 370rpx;
	width: 100%;
	background: url();
	background-size: cover; /* 使背景图像覆盖整个元素 */  
	background-position: center; /* 背景图像居中对齐 */  
	background-repeat: no-repeat;
}
.person_picture{
	width: 300rpx;
	height: 250rpx;
	border-style: solid;
	border-width: 20rpx;
	border-color: aliceblue;
	border-radius: 50%;
}
</style>